<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Form Verify</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../src/css/global.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main">
            <div id="LAY_preview">

                <h1 class="site-h1"><i class="layui-icon" style="top: 8px;">&#xe63c;</i>表单模块文档 - layui.form</h1>
                <blockquote class="site-text layui-elem-quote">
                    我们会在最常用的模块上耗费庞大的精力，用尽可能简单的方式诠释Layui所带来的便捷性。显而易见，Form是我们非常看重的一块。于是她试图用一贯极简的姿态，去捕获你对她的深深青睐。寄托在原始表单元素上的属性设定，及其全自动的初始渲染，和基于事件驱动的接口书写方式，会让你觉得，传统模式下的组件调用形式，也可以是那样的优雅、简单。然而文字的陈述始终是苍白的，所以用行动慢慢感受layui.form给你的项目带来的效率提升吧。
                </blockquote>
                <blockquote class="site-text layui-elem-quote">
                    <p>模块加载名称：<a>form</a></p>
                </blockquote>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="use">使用</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>
                        Layui针对各种表单元素做了较为全面的UI支持，你无需去书写那些UI结构，你只需要写HTML原始的input、select、textarea这些基本的标签即可。我们在UI上的渲染只要求一点，你必须给表单体系所在的父元素加上<em>class="layui-form"</em>，一切的工作都会在你加载完form模块后，自动完成。代码参看
                        <a href="../form.html">form.html</a>
                    </p>

                    <p>正如你上述看到的，你必须放入 layui 所<em>规范的元素结构</em>，form 模块才会对其进行重置渲染。值得注意的是，在具体的每一块表单元素中，你仍是像往日一样写 input
                        等标签即可。另外，我们对我们所规范的结构进行了响应式的支持，而针对一些不同的表单排版，比如行内表单，你也只需要设定我们所定义好的 class
                        即可。关于这一块，你可以移步页面元素的表单文档中做详细了解。而事实上你的大部分焦点可能也在那里，但当前这篇文档主要还是介绍 form 整体模块。</p>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="render">更新渲染</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>有些时候，你的有些表单元素可能是动态插入的。这时 Form模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif） 但没有关系，你只需要执行 <em>form.render(type,
                        filter);</em> 方法即可。</p>
                    <p>第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：</p>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>参数（type）值</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>select</td>
                            <td>刷新select选择框渲染</td>
                        </tr>
                        <tr>
                            <td>checkbox</td>
                            <td>刷新checkbox复选框（含开关）渲染</td>
                        </tr>
                        <tr>
                            <td>radio</td>
                            <td>刷新radio单选框框渲染</td>
                        </tr>
                        </tbody>
                    </table>
                    <pre class="layui-code" lay-title="例子">
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……
      </pre>
                    <p>第二个参数：filter，为 <em>class="layui-form"</em> 所在元素的 <em>lay-filter=""</em> 的值。你可以借助该参数，对表单完成局部更新。
                    </p>
                    <pre class="layui-code" lay-title="例子">
【HTML】
&lt;div class=&quot;layui-form&quot; lay-filter=&quot;test1&quot;&gt;
  …
&lt;/div&gt;

&lt;div class=&quot;layui-form&quot; lay-filter=&quot;test2&quot;&gt;
  …
&lt;/div&gt;

【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……
      </pre>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="attr">预设元素属性</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>事实上在使用表单时，你的一半精力可能会在元素本身上。所以我们把一些基础属性的配置恰恰安放在了标签本身上。如：</p>
                    <pre class="layui-code">
&lt;input type="text" lay-verify="email">
&lt;input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
&lt;button lay-submit>提交&lt;/button>
      </pre>
                    <p>上述的<em>lay-verify</em>、<em>lay-skin</em>、<em>lay-filter</em>、<em>lay-submit</em>神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由Form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：
                    </p>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="width: 80px;">属性名</th>
                            <th style="width: 150px;">属性值</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>title</td>
                            <td>任意字符</td>
                            <td>设定元素名称，一般用于checkbox、radio框</td>
                        </tr>
                        <tr>
                            <td>lay-skin</td>
                            <td>
                                switch（开关风格）
                                primary（原始风格）
                            </td>
                            <td>定义元素的风格，目前只对 <em>checkbox</em> 元素有效，可将其转变为开关样式</td>
                        </tr>
                        <tr>
                            <td>lay-ignore</td>
                            <td>任意字符或不设值</td>
                            <td>是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格</td>
                        </tr>
                        <tr>
                            <td>lay-filter</td>
                            <td>任意字符</td>
                            <td>事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于Form模块，它在Layui的很多基于事件的接口中都会应用到。</td>
                        </tr>
                        <tr>
                            <td>lay-verify</td>
                            <td>required（必填项）<br>phone（手机号）<br>email（邮箱）<br>url（网址）<br>number（数字）<br>date（日期）<br>identity（身份证）<br>自定义值
                            </td>
                            <td>同时支持多条规则的验证，格式：<em>lay-verify="验证A|验证B"</em>
                                <br>如：<em>lay-verify="required|phone|number"</em>
                                <br><br>另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。<a
                                        href="#verify">详见表单验证</a></td>
                        </tr>
                        <tr>
                            <td>lay-verType</td>
                            <td>
                                tips（吸附层）<br>alert（对话框）<br>msg（默认）
                            </td>
                            <td>用于定义异常提示层模式。注意：<em>该功能为 layui 2.2.0 新增</em></td>
                        </tr>
                        <tr>
                            <td>lay-submit</td>
                            <td>无需填写值</td>
                            <td>绑定触发提交的元素，如button</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="on">事件监听</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>语法：<a>form.on('event(过滤器值)', callback);</a></p>
                    <p>Form模块在Layui事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：</p>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>event</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>select</td>
                            <td>监听select下拉选择事件</td>
                        </tr>
                        <tr>
                            <td>checkbox</td>
                            <td>监听checkbox复选框勾选事件</td>
                        </tr>
                        <tr>
                            <td>switch</td>
                            <td>监听checkbox复选框开关事件</td>
                        </tr>
                        <tr>
                            <td>radio</td>
                            <td>监听radio单选框事件</td>
                        </tr>
                        <tr>
                            <td>submit</td>
                            <td>监听表单提交事件</td>
                        </tr>
                        </tbody>
                    </table>
                    <p>默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。<br>如：<em>&lt;select lay-filter="test">&lt;/select></em>
                    </p>
                    <pre class="layui-code">
form.on('select(test)', function(data){
  console.log(data);
});
      </pre>
                </div>
                <div class="site-title">
                    <fieldset>
                        <legend><a name="onselect">监听select选择</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：</p>
                    <pre class="layui-code" lay-title="语法">
form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});
      </pre>
                    <p>请注意：如果你想监听所有的select，去掉过滤器<em>(filter)</em>即可。下面将不再对此进行备注。</p>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="oncheckbox">监听checkbox复选</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：</p>
                    <pre class="layui-code" lay-title="语法">
form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});
      </pre>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="onswitch">监听switch开关</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>开关被点击时触发，回调函数返回一个object参数，携带两个成员：</p>
                    <pre class="layui-code" lay-title="语法">
form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启，true或者false
  console.log(data.value); //开关value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});
      </pre>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="onradio">监听radio单选</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：</p>
                    <pre class="layui-code" lay-title="语法">
form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});
      </pre>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="onsubmit">监听submit提交</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：</p>
                    <pre class="layui-code" lay-title="语法">
form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
      </pre>
                    <p>再次温馨提示：上述的<em>submit(*)</em>中的 <em>*</em> 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：</p>
                    <pre class="layui-code">
&lt;button lay-submit lay-filter="*">提交&lt;/button>
      </pre>
                    <p>你可以把*号换成任意的值，如：<em>lay-filter="go"</em>，但监听事件时也要改成 <em>form.on('submit(go)', callback);</em></p>
                </div>

                <div class="site-title">
                    <fieldset>
                        <legend><a name="verify">表单验证</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>我们对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 <em>lay-verify=""</em> 属性值即可。如：</p>
                    <pre class="layui-code">
&lt;input type="text" lay-verify="email">

还同时支持多条规则的验证，如下：
&lt;input type="text" lay-verify="required|phone|number">
      </pre>
                    <p>
                        上述对输入框定义了一个邮箱规则的校验，它会在 form 模块内部完成。目前我们内置的校验支持见上文的：<a href="#attr">预设元素属性</a>
                    </p>
                    <p>除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。</p>
                    <pre class="layui-code" lay-title="语法">
form.verify({
  username: function(value, item){ //<em>value：表单的值、item：表单的DOM对象</em>
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
  }

  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ]
});
      </pre>
                    <p>当你自定义了类似上面的验证规则后，你只需要把key赋值给输入框的 <em>lay-verify</em> 属性即可：</p>
                    <pre class="layui-code">
&lt;input type="text" lay-verify="username" placeholder="请输入用户名">
&lt;input type="password" lay-verify="pass" placeholder="请输入密码">
      </pre>
                </div>
                <div class="site-title">
                    <fieldset>
                        <legend><a name="other">再次温馨提示一下</a></legend>
                    </fieldset>
                </div>
                <div class="site-text">
                    <p>针对一些不同的表单排版，比如行内表单、整体表单风格、按钮风格等等，请移步到文档导航左侧【<em>页面元素</em>】下的指定分类即可。</p>
                </div>

                <div class="layui-elem-quote">
                    <p>Layui - 用心与你沟通</p>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="../plugins/layui/layui.js"></script>

</body>
</html>